<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			/*同一页面中的字体*/
			body {
				font: 0.75rem/1 "mv boli";
			}

			.outer {
				width: 18.75rem;
				/* height: 29.5625rem;
				background-color: #bfa; */
				/*设置outer居中效果*/
				margin: 50px auto;
			}

			.title {
				/*上边框*/
				border-top: 0.125rem solid #019e8b;
				/*高度*/
				height: 36px;
				/*设置背景颜色*/
				background-color: #f1f1f1;
				/*文字自动在行里垂直居中，那么这里设置行高等于36px*/
				line-height: 36px;
				/*这里没有指定width，不会影响width。会自动占满元素*/
				padding: 0px 22px 0px 16px;
			}

			.title a {
				float: right;
				color: red;
			}

			/*这里的字体，大小是14px。如果不设置后面的/36px，那么就使用默认的行高。*/
			.title h3 {
				font: 16px/36px "mv boli";
			}
			
			/*去除项目的符号*/
			ul{
				list-style: none;
				/*为劜统一设置一个下边框*/
				border-bottom: #deddd9 1px dashed;
			}
			
			.content{
				border: 1px #deddd9 solid;
				padding: 0px 30px 0px 20px;
			}
			
			.content a{
				color: black;
				text-decoration: none;
			}
			
			/*为超链接添加伪类*/
			.content a:hover{
				color: red;
				/*添加下划线*/
				text-decoration: underline;
			}
			
			.content .red{
				color: red;
				font-weight: bold;
			}
			
			.left{
				float: left;
			}
			
			.content .right{
				float: right;
			}
			
			.content h3{
				margin-top: 15px;
				margin-bottom: 15px;
			}
			
			.content li{
				margin-bottom: 15px;
			}
			
			.content .no-border{
				border-bottom: none;
			}		
			
		</style>
	</head>
	<body>
		<!-- 
		H:\尚硅谷前端学科全套教程\1.前端学科--基础阶段\尚硅谷HTML+CSS教程\视频\视频4 
		《68.尚硅谷_HTML&CSS基础_开班信息-完成》
		-->
		<!-- 创建一个外层div -->
		<div class="outer">
			<!-- 开班信息的头部 -->
			<div class="title">
				<a href="#">16年面授开班计划</a>
				<!-- 这个最好放下面 -->
				<h3>近期开班</h3>
			</div>

			<div class="content">
				<h3><a href="#">JavaEE+云计算-全程就业班</a></h3>
				<ul>
					<li>
						<!-- 这里注意IE6的影响，内联元素无效 -->
						<a href="#" class="right"><span class="red">预约报名</span></a>
						<a href="#">开班时间：<span class="red">2016-04-27</span></a>
					</li>
					<li>
						<!-- 这里注意IE6的影响，内联元素无效 -->
						<a href="#" class="right"><span class="red">无座，名额爆满</span></a>
						<a href="#">开班时间：<span class="red">2016-04-27</span></a>
					</li>
					<li>
						<!-- 这里注意IE6的影响，内联元素无效 -->
						<a href="#" class="right"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-04-27</span></a>
					</li>
					<li>
						<!-- 这里注意IE6的影响，内联元素无效 -->
						<a href="#" class="right"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-04-27</span></a>
					</li>
					<li>
						<!-- 这里注意IE6的影响，内联元素无效 -->
						<a href="#" class="right"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-04-27</span></a>
					</li>
				</ul>
				
				<h3><a href="#">Android+人工智能-全程就业班</a></h3>
				<ul>
					<li>
						<!-- 这里注意IE6的影响，内联元素无效 -->
						<a href="#" class="right"><span class="red">预约报名</span></a>
						<a href="#">开班时间：<span class="red">2016-04-27</span></a>
					</li>
					<li>
						<!-- 这里注意IE6的影响，内联元素无效 -->
						<a href="#" class="right"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-04-27</span></a>
					</li>
					<li>
						<!-- 这里注意IE6的影响，内联元素无效 -->
						<a href="#" class="right"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-04-27</span></a>
					</li>
					<li>
						<!-- 这里注意IE6的影响，内联元素无效 -->
						<a href="#" class="right"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-04-27</span></a>
					</li>
				</ul>
				
				<h3><a href="#">前端+HTML5-全程就业班</a></h3>
				<ul class="no-border">
					<li>
						<!-- 这里注意IE6的影响，内联元素无效 -->
						<a href="#" class="right"><span class="red">预约报名</span></a>
						<a href="#">开班时间：<span class="red">2016-04-27</span></a>
					</li>
					<li>
						<!-- 这里注意IE6的影响，内联元素无效 -->
						<a href="#" class="right"><span>开班盛况</span></a>
						<a href="#">开班时间：<span>2016-04-27</span></a>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>
